<template>
  <div id="talentDetails">
    <table class="table">
      <tbody>
        <tr>
          <td></td>
          <td v-for="(item, index) in detailsList" :key="'c' + index">
            <div class="cinfoBox">
              <div class="logoBox">
                <img
                  v-if="item.isdelete != 2 && item.isdelete != 3"
                  :src="item.logo"
                  class="logoImg"
                  @click="go_to_page01(item.authorid)"
                  v-errorImg:talent
                />
                <img
                  class="logoImg"
                  v-if="item.isdelete == 2 || item.isdelete == 3"
                  src="@/assets/shi/detail.jpg"
                  alt
                  @click="go_to_page01(item.authorid)"
                />
              </div>

              <div class="cinfoRight">
                <div class="right01">
                  <span @click="go_to_page01(item.authorid)">
                    {{
                    item.nickname
                    }}
                  </span>
                  <img
                    src="../../../../assets/wang/talentCompare/rzBlue.png"
                    v-if="item.verifytype == 2"
                  />
                  <img
                    src="../../../../assets/wang/talentCompare/rzOrange.png"
                    v-if="item.verifytype == 1"
                  />
                  <img
                    src="../../../../assets/wang/talentCompare/shop.png"
                    v-if="item.is_shop == 1"
                  />
                  <div v-if="item.isdelete == 2" class="delete">已封号</div>
                  <div v-if="item.isdelete == 3" class="delete">已注销</div>
                </div>
                <div class="right02">
                  <span>抖音号:</span>
                  <span>{{ item.uniqueid }}</span>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <!-- 基础信息 -->
        <tr>
          <td :colspan="detailsList.length + 1" class="titleBox_title">
            <div class="titleBox_box"></div>
            <div class="titleBox">
              <span>基础信息</span>
            </div>
          </td>
        </tr>
        <tr>
          <td class="title">行业标签</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span v-if="item.category_name != ''">{{ item.category_name }}</span>
            <span v-else>--</span>
          </td>
        </tr>
        <tr>
          <td class="title">粉丝总数</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.total_fans) }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">行业周榜单</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ item.week_rank }}</span>
          </td>
        </tr>
        <!-- <tr>
          <td class="title">
            掌上指数
            <el-tooltip
              effect="light"
              content="掌上指数由账号粉丝总量、发布作品的点赞、评论、转发等数据维度加权计算所得，体现账号的运营表现。"
              placement="top"
              popper-class="mytooltip"
            >
              <img
                src="../../../../assets/wang/talentCompare/zsIndex.png"
                style="cursor: pointer"
              />
            </el-tooltip>
          </td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span v-if="item.hint != 0">{{ item.hint }}</span>
            <span v-if="item.hint == 0">--</span>
          </td>
        </tr>-->
        <!-- 带货能力 -->
        <tr>
          <td :colspan="detailsList.length + 1" class="titleBox_title">
            <div class="titleBox_box"></div>
            <div class="titleBox">
              <span>带货能力</span>
            </div>
          </td>
        </tr>
        <tr>
          <td class="title">购物车开通情况</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span v-if="item.is_shop == 1">已开通</span>
            <span v-if="item.is_shop == 0" class="onOpen">未开通</span>
          </td>
        </tr>
        <tr>
          <td class="title">电商橱窗商品数</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.pro_count) }}</span>
          </td>
        </tr>
        <!-- <tr>
          <td class="title">达人销量榜</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span v-if=" item.author_sale_rank=='--'">{{ item.author_sale_rank }}</span>
            <span v-else>{{ format_num(item.author_sale_rank) }}</span>
          </td>
        </tr>-->
        <tr>
          <td class="title">电商视频数</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.aweme_pro_count) }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">电商视频均点赞</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.aweme_favorite_avg) }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">电商视频均分享</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.aweme_share_avg) }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">主推商品分类</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span class="pro_category" v-if="item.pro_category != ''">
              {{
              item.pro_category
              }}
            </span>
            <span v-if="item.pro_category == ''" class="pro_category">--</span>
          </td>
        </tr>
        <!-- 运营数据 -->
        <tr>
          <td :colspan="detailsList.length + 1" class="titleBox_title">
            <div class="titleBox_box"></div>
            <div class="titleBox titleBoxData">
              <span>运营数据</span>
              <el-tooltip
                effect="light"
                content="只展示近30天的数据"
                placement="top"
                popper-class="mytooltip"
              >
                <img
                  src="../../../../assets/wang/talentCompare/zsIndex.png"
                  style="cursor: pointer"
                />
              </el-tooltip>
            </div>
          </td>
        </tr>
        <tr>
          <td class="title">粉丝增量</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.total_fans_incr) }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">点赞增量</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.total_favorite_incr) }}</span>
          </td>
        </tr>

        <tr>
          <td class="title">作品数</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.total_video_incr) }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">作品平均点赞</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.total_favorite_avg) }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">作品平均评论</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.total_comment_avg) }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">作品平均转发</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.total_share_avg) }}</span>
          </td>
        </tr>
        <!-- 运营数据 -->
        <tr>
          <td :colspan="detailsList.length + 1" class="titleBox_title">
            <div class="titleBox_box"></div>
            <div class="titleBox">
              <span>粉丝数据</span>
            </div>
          </td>
        </tr>
        <tr>
          <td class="title">粉丝性别分布</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ item.max_male }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">粉丝年龄分布</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ item.max_section }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">粉丝地域分布</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ item.max_area }}</span>
          </td>
        </tr>
        <!-- <tr>
          <td class="title">弹幕热词</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span class="hot_word">
              {{ item.hot_word }}
            </span>
          </td>
        </tr>-->
        <tr>
          <td class="title">点赞数</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.total_favorite) }}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      id: 0,

      detailsList: [],
    }
  },
  props: {
    inputName: String,
  },
  computed: {},
  created() {
    this.id = this.inputName
    this.getDetailsData()
  },
  mounted() {},
  watch: {},
  methods: {
    getDetailsData() {
      let that = this

      this.$axios
        .get('/api/author/comparedetail?api-version=2', {
          params: {
            id: this.id,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            that.detailsList = res.data.data
          }
        })
    },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`,
      })
      window.open(router.href, '_blank')
    },
  },
  components: {},
}
</script>

<style scoped lang="less">
#talentDetails {
  padding: 30px;
  table {
    width: 100%;
    tr {
      td:nth-of-type(1) {
        text-align: left;
        width: 105px;
      }
      td {
        text-align: center;
        font-size: 14px;
        color: #222;
      }
    }
    tr:nth-of-type(1) {
      border-bottom: 1px solid #efefef;
    }

    .cinfoBox {
      height: 114px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;

      flex-direction: column;
      align-items: center;
      .logoBox {
        position: relative;
        width: 50px;
        height: 50px;

        .logoImg {
          cursor: pointer;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: 1px solid #e5e5e5;
          display: block;
          margin: 0 auto;
          border: 1px solid #e5e5e5;
        }

        .delete {
          width: 50px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          background-color: #f5f5f5;
          border-radius: 12px;
          border: solid 1px #e5e5e5;
          font-size: 12px;
          color: #222222;
          position: absolute;
          left: 50%;
          bottom: -2px;
          transform: translate(-50%, 0);
        }
      }
    }
    .cinfoRight {
      // flex: 1;
      margin-left: 12px;
      .right01 {
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        margin-top: 10px;
        .delete {
          height: 20px;
          line-height: 18px;
          width: 50px;
          text-align: center;
          background-color: #ffffff;
          border-radius: 10px;
          border: solid 1px #e5e5e5;
          box-sizing: border-box;
          font-size: 12px;
          color: #555555;
          margin-left: 4px;
        }
        span {
          display: inline-block;
          max-width: 100px;
          font-size: 14px;
          color: #222222;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
        }
        span:hover {
          color: #ff924b;
        }
        img {
          width: 16px;
          height: 16px;
          margin-right: 7px;
        }
        img:nth-of-type(1) {
          margin-left: 5px;
        }
      }
      .right02 {
        margin-top: 6px;
        text-align: center;
        span {
          font-size: 12px;
          color: #888888;
        }
      }
    }

    tr:nth-of-type(3),
    tr:nth-of-type(4),
    tr:nth-of-type(5),
    tr:nth-of-type(7),
    tr:nth-of-type(8),
    tr:nth-of-type(9),
    tr:nth-of-type(10),
    tr:nth-of-type(11),
    tr:nth-of-type(12),
    tr:nth-of-type(14),
    tr:nth-of-type(15),
    tr:nth-of-type(16),
    tr:nth-of-type(17),
    tr:nth-of-type(18),
    tr:nth-of-type(19),
    tr:nth-of-type(21),
    tr:nth-of-type(22),
    tr:nth-of-type(23),
    tr:nth-of-type(24),
    tr:nth-of-type(25),
    tr:nth-of-type(26),
    tr:nth-of-type(27) {
      height: 54px;
      border-bottom: 1px solid #efefef;
      td:nth-child(1) {
        padding-left: 10px;
      }
      img {
        width: 16px;
        height: 16px;
      }
    }
    tr:nth-of-type(20),
    tr:nth-of-type(13),
    tr:nth-of-type(6),
    tr:nth-of-type(2):hover {
      border-bottom: none;
      background: #ffffff;
    }

    tr:nth-of-type(2) {
      border-bottom: none;
    }
  }
  .title {
    font-size: 14px;
    color: #888888;
  }
  .titleBox_title {
    display: flex;

    align-items: center;
    margin-top: 20px;
    margin-bottom: 10px;
    .titleBox {
      -webkit-box-align: center;

      span {
        font-size: 16px;
        color: #222222;
        font-weight: 600;
      }
    }
    .titleBoxData {
      display: flex;
      align-items: center;
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }
    }

    .titleBox_box {
      display: inline-block;
      width: 4px;
      height: 16px;
      border-radius: 100px;
      margin-right: 6px;
      background-color: #fd7f2c;
      margin-top: 1px;
    }
  }
  .onOpen {
    color: #888888;
  }
  .fansG {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 26px;
  }
  .hot_word {
    display: inline-block;
    width: 150px;
  }
  .pro_category {
    display: inline-block;
    width: 140px;
  }
}
</style>
